import {
  addGoodsItem,
  getGoodsItem,
  postShoppingCartList,
} from '@/services/demo/UserController';
import { useLoginState } from '@/store/login';
import { fileDownload } from '@/utils/file';
import { getHttpHeaders } from '@/utils/request';
import { UploadOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useAccess, useIntl } from '@umijs/max';
import { Button, Upload, UploadProps, message } from 'antd';
import { useEffect } from 'react';

type Props = {
  Authorization: string | null;
  Language: any;
  code: string;
  TimezoneOffset: number;
};

const AccessPage: React.FC = () => {
  const loginState = useLoginState();

  const header = getHttpHeaders();
  const access = useAccess();
  const intl = useIntl();

  useEffect(() => {
    console.info('getHttpHeaders:', header);
  }, []);

  const props: UploadProps = {
    name: 'file',
    action: `${process.env.Proxy}/api/upload`,
    headers: { ...header } as Props | any,
    listType: 'text',
    multiple: true,
    openFileDialogOnClick: true,
    progress: {
      strokeColor: {
        '0%': '#108ee9',
        '100%': '#87d068',
      },
      strokeWidth: 3,
      format: (percent) => percent && `${parseFloat(percent.toFixed(2))}%`,
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
    //
    onPreview: async (file) => {
      const { uid, name, fileSuffix } = file.response.data;
      const key = Math.random();
      message.open({
        key,
        content: '下载中...',
        type: 'loading',
        duration: 0,
      });
      fileDownload(
        `${process.env.Proxy}/api/download/${uid}`,
        name + fileSuffix,
      ).finally(() => {
        message.destroy(key);
      });
    },
  };

  return (
    <PageContainer
      ghost
      header={{
        title: 'upload & download 示例',
      }}
    >
      <Upload {...props}>
        <Button icon={<UploadOutlined />}>upload</Button>
      </Upload>
      <Button
        onClick={async () => {
          addGoodsItem({
            name: '太阳花4',
            des: 'beautiful',
            price: 19.99,
            created: Date.now(),
            userId: loginState.userId,
          }).then((res) => {
            message.success('数据新增成功');
          });
        }}
      >
        {intl.formatMessage({ id: 'navBar.lang' })}
      </Button>
      <Button
        onClick={async () => {
          getGoodsItem().then((res) => {
            message.success('数据查询成功');
          });
        }}
      >
        click
      </Button>
      <Button
        onClick={async () => {
          postShoppingCartList({ id: '661d308d0b2e52ea9a45dbd8' }).then(
            (res) => {
              message.success('数据查询成功');
            },
          );
        }}
      >
        click
      </Button>
    </PageContainer>
  );
};

export default AccessPage;
